<template>
  <div id="category">
    <el-card>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="console.log('select menu')">
        <el-menu-item index="1">手机</el-menu-item>
        <el-menu-item index="2">电脑</el-menu-item>
        <el-menu-item index="3">服装</el-menu-item>
        <el-menu-item index="4">家具</el-menu-item>
        <el-menu-item index="5">生鲜</el-menu-item>
        <el-menu-item index="6">母婴</el-menu-item>
        <el-menu-item index="7">艺术</el-menu-item>
        <el-menu-item index="8">学习</el-menu-item>
        <el-menu-item index="9">美妆</el-menu-item>
        <el-menu-item index="10">医疗</el-menu-item>
        <el-menu-item index="11">交通</el-menu-item>
        <el-menu-item index="12">理财</el-menu-item>
      </el-menu>
      <el-row style="padding: 10px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">全部分类</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">手机</a></el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-row style="padding: 5px">
        <span>已选择标签: </span>
        <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
          {{tag}}
        </el-tag>
      </el-row>
      <div>
        <el-row v-for="(category,catIndex) in categoryList" :key="catIndex">
          <el-col :span="2" class="tagCategory"><span>{{ category.name }}</span></el-col>
          <el-col :span="22">
            <el-row>
              <el-col class="tag" :span="3" v-for="(tag,tagIndex) in category.tagList" :key="tagIndex"><span @click="printTag(catIndex,tagIndex)">{{ tag }}</span></el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>

    </el-card>
    <div id="indexx">
      <div>
        <img src="../assets/1.jpg">
        <p>
        新品现货Apple/苹果 iPhone 12 mini Promax手机5G官方国行全网通
        </p>
      </div>
      <div>
        <img src="../assets/2.jpg">
        <p>
         新款大屏智能安卓学生价游戏5G全网通手机骁龙865千元曲屏可分期
        </p>
      </div>
      <div>
        <img src="../assets/3.jpg">
        <p>
顺丰当天发+选手环 HONOR/荣耀X20手机5G新品官方旗舰店正品X10大内存x20se手机荣耀20畅享20畅玩非华为品牌
        </p>
      </div>
      <div>
        <img src="../assets/4.jpg">
        <p>
         【直营国行全国联保】 Apple iPhone 12手机 支持移动联通电信5G 双卡双待
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "category",
  components: {},
  data() {
    return {
      activeIndex: '',
      inputVisible: false,
      inputValue: '',
      categoryList: [
        {
          name: '品牌',
          tagList: ['小米（MI）','荣耀（HONOR）','华为（HUAWEI）','vivo','OPPO','黑鲨','一加','三星（SAMSUNG）'
            ,'魅族（meizu）','Apple','真我（realme）','摩托罗拉（Motor...','中兴（ZTE）','联想（lenovo）','ROG','努比亚（nubia）'],
          checked: undefined
        },
        {
          name: '功能',
          tagList: ['超大字体','超大音量','SOS功能','语音命令','语音识别(文字语音互转)','远程协助','极简桌面模式'],
          checked: undefined
        },
        {
          name: '系统',
          tagList: ['Android','EMUI 11.0（基于Android 10）','HarmonyOS 2','IOS','其他OS'],
          checked: undefined
        },
        {
          name: 'CPU型号',
          tagList: ['骁龙855 plus','麒麟990','麒麟990 5G','骁龙768','GExynos980','MTK Helio G85','MT6873','紫光展锐','骁龙865 plus','天玑1000 plus'],
          checked: undefined
        }
      ]
    }
  },
  computed: {
    dynamicTags() {
      let dynamicTags = []
      //注意 this.$router 和 this.$route 是不一样的，$router 是整体的vue-router对象， $route是当前的路由对象
      let keyword = this.$route.query.keyword
      if(keyword) dynamicTags.push(keyword)
      this.categoryList.forEach((item) => {
        let tag = item.checked
        //在vue中，判断一个值不为空（空字符串‘’或未定义undefined）不能直接写在比较运算中，我们应该写tag这个字符串本身
        if(tag) {
          dynamicTags.push(tag)
        }
    })
    return dynamicTags
    }
  },
  watch: {
    dynamicTags() {
      console.log("已发送axios")
    }
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    printTag(catIndex,tagIndex){
      this.categoryList[catIndex].checked = this.categoryList[catIndex].tagList[tagIndex]
    },

    // showInput() {
    //   this.inputVisible = true;
    //   this.$nextTick(() => {
    //     this.$refs.saveTagInput.$refs.input.focus();
    //   });
    // },
    //
    // handleInputConfirm() {
    //   let inputValue = this.inputValue;
    //   if (inputValue) {
    //     this.dynamicTags.push(inputValue);
    //   }
    //   this.inputVisible = false;
    //   this.inputValue = '';
    // }
    },
  }
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.tag{
  font-size: 0.7em;
  padding: 5px;
}
.tagCategory{
  background-color: #F2F6FC;
  padding: 5px 5px 30px 5px;
  font-size: 0.8em;
  font-weight: bold;
}
#indexx>div {
  float: left;
  width: 220px;
  height: 270px;
  margin: 20px 20px 20px 20px;
  padding: 8px;
  /*border: 1px solid #919191;*/
  transition: all 0.5s;
}
#indexx>div>img {
  width: 200px;
  height: 200px;
}

#indexx>div>p {
  width: 200px;
  font-size: 15px;
  text-align: justify;
  /* text-indent: 2rem; */
}
</style>
